<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" id="file"></input>
  <img id="img"/>
</body>
<script>
//文档:https://developer.mozilla.org/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications#%E7%A4%BA%E4%BE%8B%EF%BC%9A%E4%BD%BF%E7%94%A8%E5%AF%B9%E8%B1%A1_url_%E6%9D%A5%E6%98%BE%E7%A4%BA%E5%9B%BE%E7%89%87
//在web当中使用图片
document.getElementById('file').onchange = function(){
  // console.log(this.files[0])
  let file = this.files[0]
  //方式1-通过fileReader,异步的,字符串
  /*
  let reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = function(e){
    console.log(e.target.result)
    document.getElementById('img').src = e.target.result
  }
  */
  //方式2-通过URL对象,blob对象,二进制文件
  document.getElementById('img').src = window.URL.createObjectURL(file)
}
</script>
</html>
